<template>
  <div>
    <van-nav-bar
        title=""
        left-text="Return"
        left-arrow
        @click-left="tzback()"
    />
    <span class="title">My Collection</span>
    <div class="div1">
      <van-row v-for="m in messages"
               :storeName="m.name"
               :star="m.star"
               :price="m.price"
               :area="m.area"
               :type="m.type"
               :src="m.img"
               :message="m.message"
      >
        <van-col offset="1" span="10">
          <van-image
              width="8rem"
              height="8rem"
              fit="cover"
              position="left"
              :src="m.img"
          />
        </van-col>
        <van-col span="13">
          <div>
            <!--          水上人间-->
            <span class="store">{{m.name}}</span>
          </div>
          <div>
            <van-rate class="star1" :size="15" v-model="m.star" allow-half />
            <span class="score">{{m.star}}</span>
          </div>
          <div>
            <span class="price">￥{{m.price}}起</span>
          </div>
          <div>
            <!--          高新区  洗浴/汗蒸-->
            <span class="area">{{m.area}}&nbsp;&nbsp;{{m.type}}</span>
          </div>
          <div class="review">
          <span >
            "{{ m.message}}"
          </span>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Attention",
  data(){
    return{
      messages:[],
    }
  },
  methods:{
    tzback(){
      this.$router.push({path:"/bath"});
    },
  },
  mounted(){
    var that=this;
    that.axios.get("http://localhost:8081/api/collection/all.do").then((response) => {
      console.log(response.data)
      //response.data 等同于R
      that.messages=response.data.data;
    })
  }
}
</script>

<style scoped>
.title{
  color: aqua;
  font-size: 28px;
  font-style: italic;
}
.store{
  padding-top: -10px;
  font-weight: bold;
  margin-right:8rem;
}
.star1{
  margin-right:6.3rem;
}
.score{
  font-size: 15px;
  color: coral;
  margin-right:10.3rem;
}
.price{
  font-size: 14px;
  margin-right:9rem;
}
.area{
  margin-right:5.3rem;
  font-size: 13px;
  color: dimgrey;
}
.review{
  width: 100%;
  color: dimgrey;
  font-size: 13px;
  margin-right:1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.div1{
  margin-top: 15px;
  height: 500px;
}
</style>